<template>
  <div style='margin-top:50px;text-align:right;font-size:14px;'>
    <span v-for="(e,i) in paginList" :key="e+i" @click="clickpagnation(i)" :class="{span_pag:true,active:i == currentPag}">{{e}}</span>
    <span>
      跳转到
    </span>
    <input style='width:20px; text-align: center;' v-model="jumpNum" @keyup.enter="inputJump" />
    页
  </div>
</template>

<script>
export default {
  props: {
    query: {
      type: Object,
      default: () => {
        return {
          pageNum: '',
          pageSize: '',
        }
      }
    },
    total: {
      type: Number,
      value: 1
    }

  },
  data() {
    return {
      //分页器数组 
      paginList: ['首页', '上一页', '下一页', '尾页'],
      currentPag: null,
      jumpNum: 1 //跳转输入框
    }
  },
  methods: {
    // 控制分页器的方法
    clickpagnation(i) {
      if (i == 0) {
        this.jumpFirst()
        this.currentPag = 0
      } else if (i == 1) {
        this.previous()
        this.currentPag = 1
      } else if (i == 2) {
        this.currentPag = 2
        this.next()
      } else {
        this.currentPag = 3
        this.lastPage()
      }
    },
    // 分页器跳转 
    jumpFirst() {

      this.query.pageNum = 1
      this.$emit('jumpFirst', e)
    },
    next() {
      this.query.pageNum += 1
      this.$emit('next', e)
    },
    previous() {
      if (this.query.pageNum == 1) {
        return false
      } else {
        this.query.pageNum -= 1
        this.$emit('previous', e)
      }
    },
    lastPage() {


      let lastnum
      if (+this.total / +this.query.pageSize == 0) {
        lastnum = +this.total / +this.query.pageSize
      } else {
        lastnum = (+this.total / +this.query.pageSize) + 1
      }
      this.query.pageNum = lastnum
      this.$emit('lastPage', e)

    },
    inputJump() {
      if (this.jumpNum >= 1) {
        this.query.pageNum = this.jumpNum
        this.jumpNum = 1
        this.$emit('inputJump', e)
      }
    }
  }
}
</script>

<style scoped>
.span_pag {
  padding-right: 5px;
}
.active {
  background-color: #f32424;
  color: #fff;
}
</style>